<template>
  <div>
    <vxe-toolbar>
      <template #buttons>
        <a-input-search
          placeholder="原材材料名称搜索"
          style="width: 200px"
          v-model:value="ApiData.productName"
          @search="onSearch"
        />
        <a-button
          style="margin: 0 10px"
          @click="$refs.OperateMaterials.visible = true"
        >
          新增物料
        </a-button>
      </template>
    </vxe-toolbar>

    <vxe-table
      border
      show-header-overflow
      show-overflow
      highlight-hover-row
      :align="allAlign"
      :data="tableData"
    >
      <vxe-table-column type="seq" title="序号" width="60"></vxe-table-column>
      <vxe-table-column
        field="productName"
        title="原材材料名称"
        min-width="120"
      ></vxe-table-column>
      <vxe-table-column field="productImage" title="物料图片" min-width="100">
        <template #default="{ row }">
          <a-avatar :src="row.productImage" />
        </template>
      </vxe-table-column>
      <vxe-table-column
        field="productPrice"
        title="物料价格(单位元)"
        min-width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="productSize"
        title="单位物料所占大小(单位 m2)"
        min-width="100"
      ></vxe-table-column>
      <vxe-table-column
        field="productSource"
        title="物料来源"
        min-width="200"
      ></vxe-table-column>
      <vxe-table-column
        field="productDesc"
        title="物料简介"
        min-width="200"
      ></vxe-table-column>
      <vxe-table-column title="创建时间" min-width="200">
        <template #default="{ row }">
          {{ tenBitTimestamp(row.createTime) }}
        </template>
      </vxe-table-column>
      <!-- <vxe-table-column
        field="address"
        title="物料创建人信息"
        min-width="200"
      ></vxe-table-column> -->
      <vxe-table-column title="操作" min-width="200" fixed="right">
        <template #default="{ row }">
          <a-button
            type="primary"
            shape="circle"
            ghost
            @click="inputStore(row)"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-ruku"></i>
          </a-button>
          <a-button
            type="primary"
            shape="circle"
            ghost
            @click="editor(row)"
            style="margin-right: 10px"
          >
            <i class="iconfont icon-bianji"></i>
          </a-button>

          <a-popconfirm
            title="确定删除该物料?"
            ok-text="确定"
            cancel-text="取消"
            @confirm="deleteAdmin(row)"
          >
            <a-button type="danger" shape="circle" ghost>
              <i class="iconfont icon-shanchu"></i>
            </a-button>
          </a-popconfirm>
        </template>
      </vxe-table-column>
    </vxe-table>
    <a-pagination
      show-quick-jumper
      :default-current="1"
      :total="totalNum"
      @change="onChange"
    />

    <!-- 弹窗 -->
    <operate-materials ref="OperateMaterials" />
    <!-- 入库进货弹窗 -->
    <inputstock-poup ref="InputstockPoup" />
  </div>
</template>

<script>
import {
  getManagerList,
  deleteoriginalProduct,
  purchase,
} from '@/api/materials'
import { thirteenBitTimestamp } from '@/utils/index'
import OperateMaterials from './components/operate-materials'
import InputstockPoup from './components/inputStock-poup'
export default {
  components: {
    OperateMaterials,
    InputstockPoup,
  },
  data() {
    return {
      allAlign: 'center',
      tableData: [],
      //   api接口请求数据
      ApiData: {
        pageNum: 1,
        pageSize: 10,
        productName: '',
        type: '0',
      },
      //   表格总数居
      totalNum: 0,
    }
  },
  created() {
    this.ManagerList()
  },
  methods: {
    onChange(pageNumber) {
      this.ApiData.pageNum = pageNumber
      this.ManagerList()
    },
    /**
     * 获取物料列表
     */
    async ManagerList() {
      return new Promise((resolve) => {
        getManagerList(this.ApiData).then((res) => {
          this.tableData = res.queryResult.list
          this.totalNum = res.queryResult.total
          resolve()
        })
      })
    },
    /**
     * 时间撮传话
     */
    tenBitTimestamp(time) {
      return thirteenBitTimestamp(time)
    },
    /**
     * 原材料名称搜索
     */
    onSearch() {
      // 0 全部 1 根据商品名称查询
      this.ApiData.type = '1'
      this.ManagerList()
    },
    /**
     * 编辑
     */
    editor(info) {
      this.$refs.OperateMaterials.apiData = info
      this.$refs.OperateMaterials.isEditor = true
      this.$refs.OperateMaterials.visible = true
    },
    /**
     * 删除
     */
    deleteAdmin(info) {
      deleteoriginalProduct(info.id).then((res) => {
        this.$message.success('删除成功')
        this.ManagerList()
      })
    },
    /**
     * 入库
     */
    inputStore(info) {
      console.log(info)
      this.$refs.InputstockPoup.apiForm.nowMaterialName = info.productName
      this.$refs.InputstockPoup.apiForm.productId = info.id
      this.$refs.InputstockPoup.visible = true
    },
  },
}
</script>

<style lang="less" scoped>
</style>